import go from 'gojs'
import request from '@/utils/request'

export function resourceChangeLogList() {
  return request({
    url: '/cloud/jcce/v1.0/job/list',
    method: 'get',
    params: {
      pageNumber: 1,
      pageSize: 10000
    }
  })
}

export default {
  name: 'reconfiguration',
  data() {
    return {
      resourceChangeList: [],
      reconfigurationNodes: [],
      // reconfigurationNodesByGroup: [],
      reconfigurationLinks: [],
      detailDataInGraphShow: [],
      title: '云平台重构展示',
      showTaskGraph: false,
      showGoChartFlag: true,
      myDiagram: null,
      hostNormalImg: '/static/kt1/hostNormalImg.png',
      hostInsertImg: '/static/kt1/hostInsertImg.png',
      hostDeleteImg: '/static/kt1/hostDeleteImg.png',
      hostUnusedImg: '/static/kt1/hostUnusedImg.png',
      hostIdInDialog: '',
      logDialogVisible: false,
      upHostLists: [],
      downHostLists: [],
      hostDetailInfo: {
        manufacturer: '', cpu: { useRatio: '', speed: '', process: '', thread: '' },
        memory: { using: '', usable: '' },
        disk: { activeTime: '', argResponseTime: '', capacity: '' }
      },
      logDetailInfo: []
    }
  },
  created() {
  },

  mounted() {
    this.getResourceChangeList()
    this.getReconfigurationGraphDatas()
  },
  methods: {
    getResourceChangeList() {
      resourceChangeLogList().then((data) => {
        this.resourceChangeList = data.data.pageData
      }).catch((error) => {
        console.log(error)
      })
      // this.resourceChangeList = [
      //   {
      //     taskId: '60001',
      //     hostId: '5736',
      //     manufacturer: '阿里云',
      //     state: 3,
      //     configInfo: 'xxVCPU-xxG-Ostype'
      //   },
      //   {
      //     taskId: '60002',
      //     hostId: '6392',
      //     manufacturer: '华为云',
      //     state: 1,
      //     configInfo: 'xxVCPU-xxG-Ostype'
      //   },
      //   {
      //     taskId: '60001',
      //     hostId: '5501',
      //     manufacturer: '火山云',
      //     state: 0,
      //     configInfo: 'xxVCPU-xxG-Ostype'
      //   },
      //   {
      //     taskId: '60001',
      //     hostId: '5746',
      //     manufacturer: '阿里云',
      //     state: 3,
      //     configInfo: 'xxVCPU-xxG-Ostype'
      //   },
      //   {
      //     taskId: '60003',
      //     hostId: '6100',
      //     manufacturer: '联通云',
      //     state: 0,
      //     configInfo: 'xxVCPU-xxG-Ostype'
      //   },
      //   {
      //     taskId: '60001',
      //     hostId: '5738',
      //     manufacturer: '阿里云',
      //     state: 1,
      //     configInfo: 'xxVCPU-xxG-Ostype'
      //   },
      //   {
      //     taskId: '60002',
      //     hostId: '5555',
      //     manufacturer: '火山云',
      //     state: 2,
      //     configInfo: 'xxVCPU-xxG-Ostype'
      //   }
      // ]
    },
    getReconfigurationGraphDatas() {
      this.reconfigurationNodes = [
        {
          id: '0', label: '阿里云',
          nodeList: [
            {
              hostId: '6391', state: 0,
              configInfo: { cpu: '10VCPU', gpuMemory: 'xxG', stype: 'Ostype', storage: '10GB', bandwidth: '100Gbps' },
              taskId: '60001'
            },
            {
              hostId: '6392', state: 0,
              configInfo: { cpu: '10VCPU', gpuMemory: 'xxG', stype: 'Ostype', storage: '10GB', bandwidth: '100Gbps' },
              taskId: '60001'
            },
            {
              hostId: '6396', state: 1,
              configInfo: { cpu: '10VCPU', gpuMemory: 'xxG', stype: 'Ostype', storage: '10GB', bandwidth: '100Gbps' },
              taskId: '60001'
            },
            {
              hostId: '6393', state: 1,
              configInfo: { cpu: '10VCPU', gpuMemory: 'xxG', stype: 'Ostype', storage: '10GB', bandwidth: '100Gbps' },
              taskId: '60002'
            },
            {
              hostId: '6397', state: 1,
              configInfo: { cpu: '10VCPU', gpuMemory: 'xxG', stype: 'Ostype', storage: '10GB', bandwidth: '100Gbps' },
              taskId: '60003'
            },
            {
              hostId: '6394', state: 0,
              configInfo: { cpu: '10VCPU', gpuMemory: 'xxG', stype: 'Ostype', storage: '10GB', bandwidth: '100Gbps' },
              taskId: '60002'
            },
            {
              hostId: '6398', state: 2,
              configInfo: { cpu: '10VCPU', gpuMemory: 'xxG', stype: 'Ostype', storage: '10GB', bandwidth: '100Gbps' },
              taskId: '60003'
            },
            {
              hostId: '6395', state: 2,
              configInfo: { cpu: '10VCPU', gpuMemory: 'xxG', stype: 'Ostype', storage: '10GB', bandwidth: '100Gbps' },
              taskId: '60001'
            },
            {
              hostId: '6399', state: 0,
              configInfo: { cpu: '10VCPU', gpuMemory: 'xxG', stype: 'Ostype', storage: '10GB', bandwidth: '100Gbps' },
              taskId: '60003'
            }]
        },
        {
          id: '1', label: '华为云',
          nodeList: [
            {
              hostId: '5319', state: 0,
              configInfo: { cpu: '10VCPU', gpuMemory: 'xxG', stype: 'Ostype', storage: '10GB', bandwidth: '100Gbps' },
              taskId: '60001'
            },
            {
              hostId: '5320', state: 0,
              configInfo: { cpu: '10VCPU', gpuMemory: 'xxG', stype: 'Ostype', storage: '10GB', bandwidth: '100Gbps' },
              taskId: '60003'
            },
            {
              hostId: '5324', state: 1,
              configInfo: { cpu: '10VCPU', gpuMemory: 'xxG', stype: 'Ostype', storage: '10GB', bandwidth: '100Gbps' },
              taskId: '60002'
            },
            {
              hostId: '5321', state: 1,
              configInfo: { cpu: '10VCPU', gpuMemory: 'xxG', stype: 'Ostype', storage: '10GB', bandwidth: '100Gbps' },
              taskId: '60001'
            },
            {
              hostId: '5325', state: 1,
              configInfo: { cpu: '10VCPU', gpuMemory: 'xxG', stype: 'Ostype', storage: '10GB', bandwidth: '100Gbps' },
              taskId: '60003'
            },
            {
              hostId: '5323', state: 2,
              configInfo: { cpu: '10VCPU', gpuMemory: 'xxG', stype: 'Ostype', storage: '10GB', bandwidth: '100Gbps' },
              taskId: '60003'
            },
            {
              hostId: '5322', state: 0,
              configInfo: { cpu: '10VCPU', gpuMemory: 'xxG', stype: 'Ostype', storage: '10GB', bandwidth: '100Gbps' },
              taskId: '60001'
            }]
        },

        {
          id: '2', label: '联通云',
          nodeList: [
            {
              hostId: '2001', state: 0,
              configInfo: { cpu: '10VCPU', gpuMemory: 'xxG', stype: 'Ostype', storage: '10GB', bandwidth: '100Gbps' },
              taskId: '60001'
            },
            { hostId: '3002', state: 0,
              configInfo: { cpu: '10VCPU', gpuMemory: 'xxG', stype: 'Ostype', storage: '10GB', bandwidth: '100Gbps' },
              taskId: '60001' },
            { hostId: '3003', state: 1,
              configInfo: { cpu: '10VCPU', gpuMemory: 'xxG', stype: 'Ostype', storage: '10GB', bandwidth: '100Gbps' },
              taskId: '60001' },
            { hostId: '3004', state: 1,
              configInfo: { cpu: '10VCPU', gpuMemory: 'xxG', stype: 'Ostype', storage: '10GB', bandwidth: '100Gbps' },
              taskId: '60003' },
            { hostId: '3005', state: 1,
              configInfo: { cpu: '10VCPU', gpuMemory: 'xxG', stype: 'Ostype', storage: '10GB', bandwidth: '100Gbps' },
              taskId: '60002' },
            { hostId: '3006', state: 0,
              configInfo: { cpu: '10VCPU', gpuMemory: 'xxG', stype: 'Ostype', storage: '10GB', bandwidth: '100Gbps' },
              taskId: '60003' },
            { hostId: '3007', state: 2,
              configInfo: { cpu: '10VCPU', gpuMemory: 'xxG', stype: 'Ostype', storage: '10GB', bandwidth: '100Gbps' },
              taskId: '60003' },
            { hostId: '3008', state: 2,
              configInfo: { cpu: '10VCPU', gpuMemory: 'xxG', stype: 'Ostype', storage: '10GB', bandwidth: '100Gbps' },
              taskId: '60001' },
            { hostId: '3009', state: 0,
              configInfo: { cpu: '10VCPU', gpuMemory: 'xxG', stype: 'Ostype', storage: '10GB', bandwidth: '100Gbps' },
              taskId: '60002' },
            { hostId: '3010', state: 1,
              configInfo: { cpu: '10VCPU', gpuMemory: 'xxG', stype: 'Ostype', storage: '10GB', bandwidth: '100Gbps' },
              taskId: '60002' },
            { hostId: '3011', state: 1,
              configInfo: { cpu: '10VCPU', gpuMemory: 'xxG', stype: 'Ostype', storage: '10GB', bandwidth: '100Gbps' },
              taskId: '60002' },
            { hostId: '3012', state: 1,
              configInfo: { cpu: '10VCPU', gpuMemory: 'xxG', stype: 'Ostype', storage: '10GB', bandwidth: '100Gbps' },
              taskId: '60002' },
            { hostId: '3010', state: 1,
              configInfo: { cpu: '10VCPU', gpuMemory: 'xxG', stype: 'Ostype', storage: '10GB', bandwidth: '100Gbps' },
              taskId: '60003' },
            { hostId: '3014', state: 1,
              configInfo: { cpu: '10VCPU', gpuMemory: 'xxG', stype: 'Ostype', storage: '10GB', bandwidth: '100Gbps' },
              taskId: '60001' },
            { hostId: '3015', state: 1,
              configInfo: { cpu: '10VCPU', gpuMemory: 'xxG', stype: 'Ostype', storage: '10GB', bandwidth: '100Gbps' },
              taskId: '60001' },
            { hostId: '3016', state: 1,
              configInfo: { cpu: '10VCPU', gpuMemory: 'xxG', stype: 'Ostype', storage: '10GB', bandwidth: '100Gbps' },
              taskId: '60001' },
            { hostId: '3017', state: 1,
              configInfo: { cpu: '10VCPU', gpuMemory: 'xxG', stype: 'Ostype', storage: '10GB', bandwidth: '100Gbps' },
              taskId: '60001' }
          ]
        },
        {
          id: '3', label: '火山云',
          nodeList: [
            { hostId: '7111', state: 0,
              configInfo: { cpu: '10VCPU', gpuMemory: 'xxG', stype: 'Ostype', storage: '10GB', bandwidth: '100Gbps' },
              taskId: '60001' },
            { hostId: '7112', state: 2,
              configInfo: { cpu: '10VCPU', gpuMemory: 'xxG', stype: 'Ostype', storage: '10GB', bandwidth: '100Gbps' },
              taskId: '60002' },
            { hostId: '7113', state: 1,
              configInfo: { cpu: '10VCPU', gpuMemory: 'xxG', stype: 'Ostype', storage: '10GB', bandwidth: '100Gbps' },
              taskId: '60001' },
            { hostId: '7114', state: 2,
              configInfo: { cpu: '10VCPU', gpuMemory: 'xxG', stype: 'Ostype', storage: '10GB', bandwidth: '100Gbps' },
              taskId: '60003' },
            { hostId: '7115', state: 0,
              configInfo: { cpu: '10VCPU', gpuMemory: 'xxG', stype: 'Ostype', storage: '10GB', bandwidth: '100Gbps' },
              taskId: '60001' }]
        },
        {
          id: '4', label: '腾讯云',
          nodeList: [
            { hostId: '9111', state: 0,
              configInfo: { cpu: '10VCPU', gpuMemory: 'xxG', stype: 'Ostype', storage: '10GB', bandwidth: '100Gbps' },
              taskId: '60001' },
            { hostId: '9116', state: 0,
              configInfo: { cpu: '10VCPU', gpuMemory: 'xxG', stype: 'Ostype', storage: '10GB', bandwidth: '100Gbps' },
              taskId: '60001' },
            { hostId: '9112', state: 2,
              configInfo: { cpu: '10VCPU', gpuMemory: 'xxG', stype: 'Ostype', storage: '10GB', bandwidth: '100Gbps' },
              taskId: '60002' },
            { hostId: '9113', state: 1,
              configInfo: { cpu: '10VCPU', gpuMemory: 'xxG', stype: 'Ostype', storage: '10GB', bandwidth: '100Gbps' },
              taskId: '60001' },
            { hostId: '9114', state: 1,
              configInfo: { cpu: '10VCPU', gpuMemory: 'xxG', stype: 'Ostype', storage: '10GB', bandwidth: '100Gbps' },
              taskId: '60003' },
            { hostId: '9115', state: 0,
              configInfo: { cpu: '10VCPU', gpuMemory: 'xxG', stype: 'Ostype', storage: '10GB', bandwidth: '100Gbps' },
              taskId: '60001' },
            { hostId: '9117', state: 1,
              configInfo: { cpu: '10VCPU', gpuMemory: 'xxG', stype: 'Ostype', storage: '10GB', bandwidth: '100Gbps' },
              taskId: '60002' },
            { hostId: '9118', state: 0,
              configInfo: { cpu: '10VCPU', gpuMemory: 'xxG', stype: 'Ostype', storage: '10GB', bandwidth: '100Gbps' },
              taskId: '60003' },
            { hostId: '9119', state: 2,
              configInfo: { cpu: '10VCPU', gpuMemory: 'xxG', stype: 'Ostype', storage: '10GB', bandwidth: '100Gbps' },
              taskId: '60001' },
            { hostId: '9120', state: 1,
              configInfo: { cpu: '10VCPU', gpuMemory: 'xxG', stype: 'Ostype', storage: '10GB', bandwidth: '100Gbps' },
              taskId: '60002' }]
        }
      ]
      this.reconfigurationLinks = [
        { id: '0', from: '6398', to: '5319', state: 0, taskId: '60001' }, {
          id: '1',
          from: '6398',
          to: '3014',
          state: 0,
          taskId: '60001'
        },
        { id: '2', from: '6391', to: '5320', state: 0, taskId: '60001' }, {
          id: '3',
          from: '6391',
          to: '5319',
          state: 0,
          taskId: '60001'
        },
        { id: '5', from: '6398', to: '3017', state: 0, taskId: '60001' }, {
          id: '7',
          from: '7112',
          to: '5321',
          state: 2,
          taskId: '60002'
        },
        { id: '8', from: '3010', to: '6399', state: 1, taskId: '60003' }, {
          id: '10',
          from: '7112',
          to: '7113',
          state: 0,
          taskId: '60002'
        },
        { id: '11', from: '3015', to: '3006', state: 0, taskId: '60001' }, {
          id: '13',
          from: '3006',
          to: '5321',
          state: 1,
          taskId: '60003'
        },
        { id: '15', from: '5321', to: '5325', state: 0, taskId: '60001' }, {
          id: '16',
          from: '5325',
          to: '3006',
          state: 0,
          taskId: '60003'
        },
        { id: '18', from: '3010', to: '5325', state: 2, taskId: '60002' }, {
          id: '19',
          from: '5324',
          to: '5321',
          state: 2,
          taskId: '60002'
        },
        { id: '22', from: '3016', to: '5321', state: 0, taskId: '60001' }, {
          id: '35',
          from: '9112',
          to: '3017',
          state: 2,
          taskId: '60002'
        },
        { id: '28', from: '9112', to: '3008', state: 0, taskId: '60002' }, {
          id: '29',
          from: '7111',
          to: '9116',
          state: 0,
          taskId: '60002'
        }]

      for (let i = 0; i < this.reconfigurationNodes.length; i++) {
        for (let j = 0; j < this.reconfigurationNodes[i].nodeList.length; j++) {
          this.reconfigurationNodes[i].nodeList[j].type = 1
        }
      }

      this.init()
    },
    getGraphDatasShow(taskId) {
      console.log(taskId)
      this.title = taskId
      for (let i = 0; i < this.reconfigurationNodes.length; i++) {
        for (let j = 0; j < this.reconfigurationNodes[i].nodeList.length; j++) {
          if (this.reconfigurationNodes[i].nodeList[j].taskId === taskId) {
            this.reconfigurationNodes[i].nodeList[j].type = 1
          } else {
            this.reconfigurationNodes[i].nodeList[j].type = 0
          }
        }
      }
      this.reconfigurationLinks = [
        { id: '0', from: '6398', to: '5319', state: 0, taskId: '60001' }, {
          id: '1',
          from: '6398',
          to: '3014',
          state: 0,
          taskId: '60001'
        },
        { id: '2', from: '6391', to: '5320', state: 0, taskId: '60001' }, {
          id: '3',
          from: '6391',
          to: '5319',
          state: 0,
          taskId: '60001'
        },
        { id: '5', from: '6398', to: '3017', state: 0, taskId: '60001' }, {
          id: '7',
          from: '7112',
          to: '5321',
          state: 2,
          taskId: '60002'
        },
        { id: '8', from: '3010', to: '6399', state: 1, taskId: '60003' }, {
          id: '10',
          from: '7112',
          to: '7113',
          state: 0,
          taskId: '60002'
        },
        { id: '11', from: '3015', to: '3006', state: 0, taskId: '60001' }, {
          id: '13',
          from: '3006',
          to: '5321',
          state: 1,
          taskId: '60003'
        },
        { id: '15', from: '5321', to: '5325', state: 0, taskId: '60001' }, {
          id: '16',
          from: '5325',
          to: '3006',
          state: 0,
          taskId: '60003'
        },
        { id: '18', from: '3010', to: '5325', state: 2, taskId: '60002' }, {
          id: '19',
          from: '5324',
          to: '5321',
          state: 2,
          taskId: '60002'
        },
        { id: '22', from: '3016', to: '5321', state: 0, taskId: '60001' }, {
          id: '35',
          from: '9112',
          to: '3017',
          state: 2,
          taskId: '60002'
        },
        { id: '28', from: '9112', to: '3008', state: 0, taskId: '60002' }, {
          id: '29',
          from: '7111',
          to: '9116',
          state: 0,
          taskId: '60002'
        }]
      for (let i = 0; i < this.reconfigurationLinks.length; i++) {
        if (this.reconfigurationLinks[i].taskId !== taskId) {
          this.reconfigurationLinks[i].state = -1
        }
      }

      this.showTaskGraph = true
      this.init()
    },
    quitTaskGraph() {
      this.showTaskGraph = false
      this.getReconfigurationGraphDatas()
      this.title = '云平台重构展示'
    },
    fullScreen() {
      const element = document.getElementById('entirety')
      if (element.requestFullscreen) {
        element.requestFullscreen()
      } else if (element.mozRequestFullScreen) {
        element.mozRequestFullScreen()
      } else if (element.webkitRequestFullscreen) {
        element.webkitRequestFullscreen()
      } else if (element.msRequestFullscreen) {
        element.msRequestFullscreen()
      }
    },
    getStateText(type) {
      switch (type) {
        case 'RUNNING':
          return '正常运行'
        case 'CREATING':
          return '创建中'
        case 2:
          return '移除'

        case 3:
          return '闲置'
      }
    },
    pictureVisible(key, e) {
      const nodeData = e.part.data
      return !!nodeData.source
    },
    init() {
      const self = this
      var $$ = go.GraphObject.make // for conciseness in defining templates
      const nodes = []
      let links = []

      console.log(this.reconfigurationNodes)
      for (let i = 0; i < this.reconfigurationNodes.length; i++) {
        nodes.push({
          key: (i + 1) + '',
          text: this.reconfigurationNodes[i].label,
          isGroup: true,
          detailData: this.reconfigurationNodes[i]
        })
        nodes.push({
          key: (i + 1) + '-' + 1,
          group: (i + 1) + '',
          source: this.hostNormalImg,
          isGroup: true
        })
        nodes.push({
          key: (i + 1) + '-' + 2,
          group: (i + 1) + '',
          source: this.hostInsertImg,
          isGroup: true
        })
        nodes.push({
          key: (i + 1) + '-' + 3,
          group: (i + 1) + '',
          source: this.hostDeleteImg,
          isGroup: true
        })
        for (let j = 0; j < this.reconfigurationNodes[i].nodeList.length; j++) {
          if (this.reconfigurationNodes[i].nodeList[j].state === 0) {
            nodes.push({
              key: this.reconfigurationNodes[i].nodeList[j].hostId,
              text: this.reconfigurationNodes[i].nodeList[j].hostId,
              group: (i + 1) + '-' + 1,
              source: this.reconfigurationNodes[i].nodeList[j].type ? this.hostNormalImg : this.hostUnusedImg,
              configInfo: this.reconfigurationNodes[i].nodeList[j].configInfo,
              hostId: this.reconfigurationNodes[i].nodeList[j].hostId,
              state: this.reconfigurationNodes[i].nodeList[j].state,
              taskId: this.reconfigurationNodes[i].nodeList[j].taskId
            })
          } else if (this.reconfigurationNodes[i].nodeList[j].state === 1) {
            nodes.push({
              key: this.reconfigurationNodes[i].nodeList[j].hostId,
              text: this.reconfigurationNodes[i].nodeList[j].hostId,
              group: (i + 1) + '-' + 2,
              source: this.reconfigurationNodes[i].nodeList[j].type ? this.hostInsertImg : this.hostUnusedImg,
              configInfo: this.reconfigurationNodes[i].nodeList[j].configInfo,
              hostId: this.reconfigurationNodes[i].nodeList[j].hostId,
              state: this.reconfigurationNodes[i].nodeList[j].state,
              taskId: this.reconfigurationNodes[i].nodeList[j].taskId
            })
          } else {
            nodes.push({
              key: this.reconfigurationNodes[i].nodeList[j].hostId,
              text: this.reconfigurationNodes[i].nodeList[j].hostId,
              group: (i + 1) + '-' + 3,
              source: this.reconfigurationNodes[i].nodeList[j].type ? this.hostDeleteImg : this.hostUnusedImg,
              configInfo: this.reconfigurationNodes[i].nodeList[j].configInfo,
              hostId: this.reconfigurationNodes[i].nodeList[j].hostId,
              state: this.reconfigurationNodes[i].nodeList[j].state,
              taskId: this.reconfigurationNodes[i].nodeList[j].taskId
            })
          }
        }
      }

      // links.push({ from: '1', to: (i + 2) + '' })
      links = this.reconfigurationLinks

      const mygoChart = document.getElementById('myDiagramDiv')
      console.log(mygoChart)
      const diagramParentDiv = document.getElementById('diagramParentDiv')
      if (mygoChart) {
        diagramParentDiv.removeChild(mygoChart)
      }
      const div = document.createElement('div')
      div.setAttribute('id', 'myDiagramDiv')
      div.setAttribute('style', 'width:100%; height:70vh')
      diagramParentDiv.appendChild(div)
      self.myDiagram = $$(go.Diagram, 'myDiagramDiv', {
        // layout: $$(go.GridLayout)
        'toolManager.mouseWheelBehavior': go.ToolManager.WheelZoom,
        initialAutoScale: go.Diagram.Uniform,
        // start everything in the middle of the viewport
        initialContentAlignment: go.Spot.Center,
        // disable user copying of parts
        allowCopy: false,
        layout: $$(go.LayeredDigraphLayout, {
          layerSpacing: 40,
          columnSpacing: 20,
          direction: 0,
          setsPortSpots: false
          // initializeOption:go.LayeredDigraphLayout.InitNaive,
          // layeringOption:go.LayeredDigraphLayout.LayerLongestPathSink
        })
      })
      this.myDiagram.groupTemplate = $$(
        go.Group,
        'Auto',
        {
          click: function(e, node) {
            if (node.data.detailData) {
              self.detailDataInGraphShow = node.data.detailData
              self.showGoChartFlag = false
              console.log(node.data)
            }
          }
        },
        {
          isSubGraphExpanded: true,
          wasSubGraphExpanded: false
        },
        $$(go.Shape, 'Rectangle', { fill: null, stroke: '#ffffff' }),
        $$(
          go.Panel,
          'Table',
          $$('SubGraphExpanderButton', { row: 0, column: 0, margin: 3 }),
          $$(
            go.TextBlock,
            {
              row: 0,
              column: 1,
              stroke: '#ffffff',
              font: 'bold 16px sans-serif',
              textAlign: 'center',
              margin: 10,
              stretch: go.GraphObject.Horizontal
            },
            new go.Binding('text')
          ),
          $$(go.Picture, {
            row: 0,
            column: 1,
            desiredSize: new go.Size(30, 30),
            stretch: go.GraphObject.Horizontal
          }, new go.Binding('source'), new go.Binding('visible', 'key', this.pictureVisible)),
          $$(
            go.Placeholder,
            { row: 1, columnSpan: 2, padding: 10, alignment: go.Spot.TopLeft },
            new go.Binding('padding', 'isSubGraphExpanded', function(exp) {
              return exp ? 10 : 0
            })
          )
        )
      )

      self.myDiagram.linkTemplate = $$(
        go.Link,
        {
          curve: go.Link.Bezier
        },
        $$(
          go.Shape,
          {
            strokeWidth: 2,
            name: 'PIPE',
            strokeDashArray: [10, 10]
          },
          new go.Binding('stroke', 'state', (f) => {
            return colorSet(f)
          })
        ),
        $$(
          go.Shape,
          { toArrow: 'Standard', stroke: null, scale: 2 },
          new go.Binding('fill', 'state', (f) => {
            return colorSet(f)
          })
        ),
        $$(
          go.TextBlock,
          {
            textAlign: 'center',
            font: '16pt helvetica, arial, sans-serif',
            segmentOffset: new go.Point(0, 10),
            margin: 4,
            editable: false
          },
          new go.Binding('text', 'flow', this.linkTextConverter).makeTwoWay(),
          new go.Binding('stroke', 'flow').makeTwoWay()
        )
      )

      function colorSet(param) {
        switch (param) {
          case 0:
            return 'white'
          case 1:
            return '#ffaa3d'
          case 2:
            return '#9fffa6'
          default:
            return '#6e6e6e'
        }
      }

      self.myDiagram.nodeTemplate = $$(
        go.Node,
        'Vertical',
        $$(go.Panel, 'Auto',
          $$(go.Shape, 'RoundedRectangle',
            {
              fill: null, // 设置内部填充的颜色
              stroke: 'rgba(255,255,255,0)'// 设置边框的颜色
            }
          ),
          $$(go.Panel, 'Table', { desiredSize: new go.Size(28, 42) },
            $$(go.Picture, {
              row: 0,
              column: 0,
              rowSpan: 2,
              desiredSize: new go.Size(25, 25)
            }, new go.Binding('source')),
            $$(go.TextBlock, {
              row: 2,
              column: 0,
              alignment: go.Spot.Top,
              margin: 5,
              font: 'bold 12px sans-serif ',
              stroke: '#ffffff'
            }, new go.Binding('text'))
          )
        ),
        {
          click: function(e, node) {
            // self.detailAlertData = node.data.detailData
            // self.showGoChartFlag = false
            console.log(node.data)
          }
        },
        {
          toolTip:
            $$('ToolTip',
              $$(go.Panel, 'Table',
                $$(go.TextBlock, {
                  row: 0,
                  column: 0,
                  alignment: go.Spot.Top,
                  margin: 5,
                  font: 'bold 12px sans-serif ',
                  stroke: '#000000'
                }, new go.Binding('text', 'taskId', () => {
                  return '任务id：'
                })),
                $$(go.TextBlock, {
                  row: 0,
                  column: 1,
                  alignment: go.Spot.Top,
                  margin: 5,
                  font: 'bold 12px sans-serif ',
                  stroke: '#000000'
                }, new go.Binding('text', 'taskId')),
                $$(go.TextBlock, {
                  row: 1,
                  column: 0,
                  alignment: go.Spot.Top,
                  margin: 5,
                  font: 'bold 12px sans-serif ',
                  stroke: '#000000'
                }, new go.Binding('text', 'hostId', () => {
                  return '虚拟机编号：'
                })),
                $$(go.TextBlock, {
                  row: 1,
                  column: 1,
                  alignment: go.Spot.Top,
                  margin: 5,
                  font: 'bold 12px sans-serif ',
                  stroke: '#000000'
                }, new go.Binding('text', 'hostId')),
                $$(go.TextBlock, {
                  row: 2,
                  column: 0,
                  alignment: go.Spot.Top,
                  margin: 5,
                  font: 'bold 12px sans-serif ',
                  stroke: '#000000'
                }, new go.Binding('text', 'configInfo', () => {
                  return '配置信息：'
                })),
                $$(go.TextBlock, {
                  row: 2,
                  column: 1,
                  alignment: go.Spot.Top,
                  margin: 5,
                  font: 'bold 12px sans-serif ',
                  stroke: '#000000'
                }, new go.Binding('text', 'configInfo')),
                $$(go.TextBlock, {
                  row: 3,
                  column: 0,
                  alignment: go.Spot.Top,
                  margin: 5,
                  font: 'bold 12px sans-serif ',
                  stroke: '#000000'
                }, new go.Binding('text', 'state', () => {
                  return '状态情况：'
                })),
                $$(go.TextBlock, {
                  row: 3,
                  column: 1,
                  alignment: go.Spot.Top,
                  margin: 5,
                  font: 'bold 12px sans-serif ',
                  stroke: '#000000'
                }, new go.Binding('text', 'state', (f) => {
                  return this.getStateText(f)
                }))
              )
            )
        }
      )
      self.myDiagram.model = new go.GraphLinksModel(nodes, links)
      this.linkLoop()
    },
    linkLoop() {
      clearTimeout(this.timer)
      this.timer = setTimeout(() => {
        const oldskips = this.myDiagram.skipsUndoManager
        this.myDiagram.skipsUndoManager = true
        this.myDiagram.links.each(function(link) {
          const shape = link.findObject('PIPE')
          const off = shape.strokeDashOffset - 2
          shape.strokeDashOffset = off <= 0 ? 20 : off
          // speed = parseInt(link.jb.flow);
        })
        this.myDiagram.skipsUndoManager = oldskips
        this.linkLoop()
      }, 500)
    },
    quitDetail() {
      this.init()
      this.showGoChartFlag = true
    },
    getHostDetail(hostId) {
      console.log(hostId)
      this.hostIdInDialog = hostId
      this.upHostLists = []
      this.downHostLists = []
      this.hostDetailInfo = {}
      this.logDetailInfo = []
      // getByhostId
      this.upHostLists = [
        {
          taskId: '60001',
          hostId: '6392',
          manufacturer: '阿里云',
          state: 1,
          configInfo: 'xxVCPU-xxG-Ostype'
        },
        { taskId: '60002', hostId: '5321', manufacturer: '华为云', state: 0, configInfo: 'xxVCPU-xxG-Ostype' },
        { taskId: '60001', hostId: '3016', manufacturer: '联通云', state: 0, configInfo: 'xxVCPU-xxG-Ostype' },
        { taskId: '60003', hostId: '3007', manufacturer: '联通云', state: 1, configInfo: 'xxVCPU-xxG-Ostype' },
        { taskId: '60002', hostId: '7111', manufacturer: '火山云', state: 2, configInfo: 'xxVCPU-xxG-Ostype' }]
      this.downHostLists = [
        {
          taskId: '60001',
          hostId: '6391',
          manufacturer: '阿里云',
          state: 0,
          configInfo: 'xxVCPU-xxG-Ostype'
        },
        { taskId: '60002', hostId: '5324', manufacturer: '华为云', state: 0, configInfo: 'xxVCPU-xxG-Ostype' },
        { taskId: '60001', hostId: '3018', manufacturer: '联通云', state: 1, configInfo: 'xxVCPU-xxG-Ostype' },
        { taskId: '60003', hostId: '3008', manufacturer: '联通云', state: 2, configInfo: 'xxVCPU-xxG-Ostype' },
        { taskId: '60002', hostId: '7112', manufacturer: '火山云', state: 1, configInfo: 'xxVCPU-xxG-Ostype' }]
      this.hostDetailInfo = {
        manufacturer: '阿里云', cpu: { useRatio: '70%', speed: '3.89GHZ', process: '210', thread: '3008' },
        memory: { using: '10.2GB', usable: '5.2GB' },
        disk: { activeTime: '13%', argResponseTime: '1.4ms', capacity: '932GB' }
      }
      this.logDetailInfo = [
        { id: 0, taskId: '60001', time: '2023-08-02 13:44:44', state: 1 }, {
          id: 0,
          taskId: '60001',
          time: '2023-08-02 13:45:12',
          state: 0
        },
        { id: 0, taskId: '60001', time: '2023-08-03 11:22:22', state: 2 }, {
          id: 0,
          taskId: '60002',
          time: '2023-08-03 13:44:44',
          state: 1
        },
        { id: 0, taskId: '60002', time: '2023-08-03 13:44:44', state: 0 }, {
          id: 0,
          taskId: '60002',
          time: '2023-08-03 13:44:44',
          state: 2
        }]
      this.logDialogVisible = true
    }

  }
}
